<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>书籍管理</el-breadcrumb-item>
            <el-breadcrumb-item>类别管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="编码："><el-input size="small" v-model="formInline.Code"
                    placeholder="输入编码" /></el-form-item>
            <el-form-item label="类别名称："><el-input size="small" v-model="formInline.TypeName"
                    placeholder="输入类别名称" /></el-form-item>
            <el-form-item label="状态："><el-input size="small" v-model="formInline.Status"
                    placeholder="输入状态" /></el-form-item>
            <el-form-item label="创建时间：">
                <el-date-picker v-model="timer" align="right" end-placeholder="结束日期" format="yyyy-MM-dd"
                    range-separator="至" start-placeholder="开始日期" type="datetimerange" value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
                <el-button size="small" type="warning" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-button type="primary" class="add" @click="AddClick">新 增</el-button>
        <el-table :data="listData" border style="width: 100%">
            <el-table-column prop="Code" label="编码" />
            <el-table-column prop="TypeName" label="类别名称" />
            <el-table-column prop="Status" label="状态" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column align="center" fixed="right" label="操作" prop="rateValue">
                <template #default="scope">
                    <el-button type="text" @click="editClick(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
        <!-- 编辑界面 -->
        <el-dialog :title="type === 1 ? '新增' : '编辑'" :visible.sync="editDialog" destroy-on-close>
            <el-form ref="editForm" :model="editForm" label-width="120px">
                <el-form-item label="编码：">
                    <el-input :disabled="type !== 1" v-model="editForm.Code" placeholder="请输入编码"></el-input>
                </el-form-item>
                <el-form-item label="类别名称：">
                    <el-input v-model="editForm.TypeName" placeholder="请输入类别名称"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="editForm.Statusid" placeholder="请选择状态">
                        <el-option v-for="item in CategoryOptions" :key="item.id" :label="item.name" :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：">
                    <el-date-picker v-model="editForm.createTime" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="EdithandleNo">取 消</el-button>
                <el-button type="primary" @click="EdithandleOk">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            nshow: true, //switch开启
            fshow: false, //switch关闭
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '添加',
            editDialog: false,
            type: 1, // 1新增  2编辑
            formInline: {
                page: 1,
                limit: 10,
                Code: "",
                TypeName: "",
                Status: "",
                createStartTimer: '',
                createEndTimer: '',
            },
            // rules表单验证
            rules: {
                deptName: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' }
                ],
                deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
            },
            CategoryOptions: [
                {
                    name: '状态1',
                    id: '1'
                },
                {
                    name: '状态2',
                    id: '2'
                },
                {
                    name: '状态3',
                    id: '3'
                },
                {
                    name: '状态4',
                    id: '4'
                },
                {
                    name: '状态5',
                    id: '5'
                },
            ],
            timer: null,
            editForm: {},
            // 删除部门
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    watch: {
        timer(nVal) {
            console.log(nVal, 'nVal')
            if (nVal) {
                this.formInline.createStartTimer = nVal[0]
                this.formInline.createEndTimer = nVal[1]
            } else {
                delete this.formInline.createStartTimer
                delete this.formInline.createEndTimer
            }
        },
    },
    created() {
        this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 获取公司列表
        getdata() {
            this.loading = true
            // 模拟数据开始
            let res = {
                code: 0,
                msg: null,
                count: 5,
                data: [
                    {
                        Code: '1564156',
                        TypeName: "类别名称1",
                        Statusid: "1",
                        Status: "状态1",
                        createTime: "2024-04-18",
                    },
                    {
                        Code: '1564156',
                        TypeName: "类别名称2",
                        Statusid: "2",
                        Status: "状态2",
                        createTime: "2024-04-18",
                    },
                    {
                        Code: '1564156',
                        TypeName: "类别名称3",
                        Statusid: "3",
                        Status: "状态3",
                        createTime: "2024-04-18",
                    },
                    {
                        Code: '1564156',
                        TypeName: "类别名称4",
                        Statusid: "4",
                        Status: "状态4",
                        createTime: "2024-04-18",
                    },
                    {
                        Code: '1564156',
                        TypeName: "类别名称5",
                        Statusid: "5",
                        Status: "状态5",
                        createTime: "2024-04-18",
                    },
                ]
            }
            this.loading = false
            this.listData = res.data
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
        },
        // 新增
        AddClick() {
            this.editForm.Code = ""
            this.editForm.TypeName = ""
            this.editForm.Statusid = ""
            this.editForm.createTime = ""
            this.timer = null
            this.type = 1
            this.editDialog = true
        },
        // 编辑弹框
        editClick(e) {
            this.type = 2
            console.log(e, 'e')
            this.editForm = e
            this.editDialog = true
        },
        // 编辑保存
        EdithandleOk() {
            console.log(this.editForm, 'editForm')
            //调用接口 传this.editForm
            //接口放置处
            this.editDialog = false
            this.getdata()
        },
        // 编辑取消
        EdithandleNo(e) {
            this.editDialog = false
            this.getdata()
        },
        deleteClick() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        // 搜索事件
        search() {
            console.log(this.formInline, 'this.formInline')
            // this.getdata(this.formInline)
        },
        // 重置
        reset() {
            this.formInline.deptName = ''
            this.formInline.deptNo = ''
        },
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}

.add {
    margin: 10PX 0;
}
</style>